<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" isELIgnored="false"%>

<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/contentHeader.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/index.jsp"%>
<%@page import="com.hdoit.pisces.logical.rel.model.Event"%>
<%@page import="com.hdoit.pisces.logical.rel.model.Relative"%>

<%
    request.setAttribute("modelConfigPath", "rel");
    String contextPath = request.getContextPath();
    String path = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort() + contextPath;

    String csspath=path+"/assets/css/";
    String imagepath=path+"/images/";
    String controllerPath=path+"/admin/rel/relative/";


%>

<html>
<head>
    <title>${rel.getName()}的永久主页</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="<%=csspath%>main.css"/>
</head>
<body>
<ul class="fab-menu fab-menu-fixed fab-menu-bottom-right" data-fab-toggle="click">
    <li>
        <a class="fab-menu-btn btn bg-teal-400 btn-float btn-rounded btn-icon">
            <i class="fab-icon-open icon-paragraph-justify3"></i>
            <i class="fab-icon-close icon-cross2"></i>
        </a>

        <ul class="fab-menu-inner">
            <li>
                <div data-fab-label="Compose email">
                    <a href="#" class="btn btn-default btn-rounded btn-icon btn-float">
                        <i class="icon-pencil"></i>
                    </a>
                </div>
            </li>
            <li>
                <div data-fab-label="Conversations">
                    <a href="#" class="btn btn-default btn-rounded btn-icon btn-float">
                        <i class="icon-bubbles7"></i>
                    </a>
                    <span class="badge bg-primary-400">5</span>
                </div>
            </li>
            <li>
                <div data-fab-label="Chat with Jack">
                    <a href="#" class="btn bg-pink-400 btn-rounded btn-icon btn-float">
                        <img src="<c:url value='/plugins/limitless/default/images/placeholder.jpg'/>" class="img-responsive" alt="">
                    </a>
                    <span class="status-mark border-pink-400"></span>
                </div>
            </li>
        </ul>
    </li>
</ul>

<!-- Wrapper -->
<div id="wrapper">

    <!-- Nav-->
    <nav id="nav">
        <ul>
            <li><a href="#header">首页</a></li>
            <li><a href="#introduction">简介</a></li>
            <li><a href="#event">事迹</a></li>         
            <li><a href="#family">家人</a></li>
            <li><a href="#resource">影像</a></li>
            <li><a href="#comment">留言</a></li>
            <!--a class="button special small" style="float: right;" href="/admin/relative/relative_edit">编辑</a-->
        </ul>
    </nav>


    <!-- Header 显示遗像+生卒年-->
    <header id="header" class="alt">
        <span class="logo">
            <!-- img src="${rel.relative_file}/image/photo.jpg" alt=""/ -->
			<img src="<%=path%>/admin/rel/relative/getimage?path=${rel.relative_file}" alt=""/>
		</span>
        <h1>${rel.getName()}</h1>
        <h2>${rel.getBirthdayOfString()} - ${rel.getDeathdayOfString()}</h2>
    </header>

    <!--主要内容-->
    <div id="main">

        <!--简介-->
        <section id="introduction" class="main">
            <c:import url="relative_introduction.jsp" />
        </section>

        <!--事迹（时间轴）-->
        <section  id="event" class="main">


                <!--显示时间轴-->
                <div id="div_event_main" >
                    <header class="major">
                        <h2 >生平</h2>
                        <div class="div-show-hover">
                            <button class="button special small" onclick="add_event();">添加</button>       
                        </div>
                    </header>

                    <!-- 时间轴 -->                   
                    <section id="cd-timeline" class="cd-container">
                            <c:forEach var="event" items="${events}" varStatus="status">
                                <div class="cd-timeline-block" >
                                    <div class="cd-timeline-img first">
                                        <img src="<%=imagepath%>circle.svg" alt="${status.index}" >
                                    </div>
                                    <div class="cd-timeline-content" data-id="${event.eventId}">
                                        <p>${event.eventInfo}</p>
                                        <span class="cd-date">${event.getDateOfString()}</span>  
                                    </div>
                                </div>
                            </c:forEach>

                    </section>
                </div>


                <div id="div_event_edit">
                    <table class="cntable table table-bordered dataTable table-employee ">
                        <thead>
                            <tr>
                                <th style="width:50px">序号</th>
                                <th style="width:100px">时间</th>
                                <th style="width:130px">事件</th>
                            </tr>
                        </thead>
                        <tbody id="eventlist">
                            <c:forEach var="event" items="${events}" varStatus="status">
                                <tr data-id="${event.eventId}">
                                    <td>${status.index+1}</td>
                                    <td>${event.eventInfo}</td>
                                    <td>${event.getDateOfString()}</td>                                    
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
        </section>



        <div>
        <section id="resource" class="main">

            <!--显示-->
            <section id="intro-left">
                <header class="major">
                        <h2 >影像</h2>
                </header>

                    

                    <div class="panel-body">
                        <div class="tabbable">
                            <ul class="nav nav-tabs nav-tabs-top nav-justified">
                                <li class="active"><a href="#tab-image" data-toggle="tab">图片</a></li>
                                <li><a href="#tab-audio" data-toggle="tab">音频</a></li>
                                <li><a href="#tab-video" data-toggle="tab">视频</a></li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane active" id="tab-image">
                                    <div class="row">
                                        <c:forEach var="image" items="${images}" varStatus="status">
                                            <div class="col-lg-3 col-md-3 col-sm-6">
                                                <div class="thumbnail">
                                                    <div class="thumb">
                                                        <img src="<c:url value='${image}'/>" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </div>                                   
                                </div>

                                <div class="tab-pane" id="tab-audio">
                                    <div class="tab-pane active" id="tab-image">
                                    <div class="row">
                                        <c:forEach var="image" items="${images}" varStatus="status">
                                            <div class="col-lg-3 col-md-3 col-sm-6">
                                                <div class="thumbnail">
                                                    <div class="video-container">
                                                        <iframe allowfullscreen="" frameborder="0" mozallowfullscreen="" src="http://v.youku.com/v_show/id_XMjg1MjMxOTg4NA==.html" webkitallowfullscreen=""></iframe>
                                                    </div>
                                                </div>
                                            </div>
                                        </c:forEach>
                                    </div>                                   
                                </div>
                                </div>

                                <div class="tab-pane" id="tab-video">
                                    DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg whatever.
                                </div>
                                

                                
                            </div>
                        </div>
                    </div>  

                 
                
        </section>
        </section>
        </div>


            



        <!-- 评价 -->
        <div>
        <section id="comment" class="main">
            <div class="spotlight">
                <div class="content">
                    <header class="major">
                        <h2>留言</h2>
                    </header>

                </div>
            </div>
        </section>
        <div>

    </div>


</div>


<script type="text/javascript">


    function add_event(){
        var id=getKeyId();
        if(isEditor(id)){
            top.openModal("/admin/rel/relative/edit_event?key="+id+"&relativeId="+${relative.relativeId},"event_form","添加事件",800,446);
        }      
    }
</script>

<script type="text/javascript">
    var eventItems=document.getElementById('reventlist').getElementsByTagName('tr'); 
    var len=eventItems.length; 
    var flag=0;//修改默认值
    for(i=0;i<len;i++){
        titles[i].onclick=function(){titles[i].data-id;}; 
    }
    function edit_event(i){
        if(isEditor(id)){
            top.openModal("/admin/rel/relative/edit_event?key="+i+"event_form","编辑事件",800,446);
        }
    }

</script>




<!-- Scripts -->
<script src="../../../../assets/js/jquery.min.js"></script>
<script src="../../../../assets/js/jquery.scrollex.min.js"></script>
<script src="../../../../assets/js/jquery.scrolly.min.js"></script>
<script src="../../../../assets/js/skel.min.js"></script>
<script src="../../../../assets/js/util.js"></script>
<!--[if lte IE 8]>
<script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="../../../../assets/js/main.js"></script>

</body>
</html>
<%@ include file="/WEB-INF/views/shared/base/scripts/jqueryui.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formselects.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formstyling.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formselects.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formpickers.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/dialog.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/contentFooter.jsp"%>




<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/pages/forms/form_inputs.jsp"%>



<%@ include file="/WEB-INF/views/shared/base/master/limitless/default/demo/contentFooter.jsp"%>

<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/uploaders/uploaders.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/pages/fileUploader/uploader_dropzone.jsp"%>




